<template>
  <div id="app">
    <top-nav></top-nav>
    <div class="left-div">
      <el-form class="from" ref="form" label-width="80px">
        <el-form-item label="文章标题" :model="form">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" :model="form">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="指导老师">
          <el-select v-model="teachvalue" placeholder="请选择">
           <el-option
            v-for="item in teachdata"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="文章类别">
          <el-select v-model="arttypevalue" placeholder="请选择">
            <el-option
              v-for="item in arttypedata"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文章正文" :model="form">
        </el-form-item>
      </el-form>
      <textarea class="textarea" id="area" v-model="textareValue"> </textarea>
    </div>
    <div class="right-div">
      <div class="right-text">{{divValue}}</div>
    </div>
  </div>
</template>

<script>
  import TopNav from '@/components/top-nav'
  export default {
    name: 'write',
    data () {
      return {
        textareValue: '',
        divValue: '',
        maxLengh: 10,
        countOfcurrow: 0,
        isWatch: true,
        form: {
          title: '',
          name: '',
          teachercode: ''
        },
        teachdata: [{
          value: '选项1',
          label: '一年级的老师'
        }, {
          value: '选项2',
          label: '二年级的老师'
        }, {
          value: '选项3',
          label: '三年级的老师'
        }, {
          value: '选项4',
          label: '四年级的老师'
        }, {
          value: '选项5',
          label: '五年级的老师'
        }],
        teachvalue: '',
        arttypevalue: '',
        arttypedata : [{value: 'yilun', label: '议论文'},{value: 'shuqing', label: '抒情文'},{value: 'xushi', label: '叙事文'}]
      }
    },
    components: {
      TopNav
    },
    watch: {
      textareValue (curValue,oldValue) {
        this.divValue = curValue
        if (!this.isWatch) {
          this.isWatch = true
          return
        }
        //退格键
        if (oldValue.length > curValue.length) {
          let lastchar = oldValue.charAt(oldValue.length - 1)
          //删除的是 \n 那么 countOfcurrow = 最后一 行字符的长度
          if (lastchar === '\n') {
            let arrary = this.textareValue.split('\n')
            let lastStr = arrary[arrary.length - 1]
            this.countOfcurrow = lastStr.length
            return
          }
          //不是 \n正常的--
          if (this.countOfcurrow != 0) {
            this.countOfcurrow--
          }
          return
        }
        //正常的输入
        let lastchar = curValue.charAt(curValue.length - 1)

        if (this.countOfcurrow === 0 && lastchar === '\n') {
          this.countOfcurrow = 0
          return
        }
        //没有超过最大行数并且手动输入换行 此时需要增加两个空格
        if (lastchar === '\n' && this.countOfcurrow <= this.maxLengh) {
          this.isWatch = false
          this.textareValue = curValue + ' ' + ' '
          // this.isWatch = true
          this.countOfcurrow = 2
          return
        }

        this.countOfcurrow ++
        //等于了最大数，自动加上\n 并且countOfcurrow清零
        if (this.countOfcurrow > this.maxLengh) {
          //自动换行 不需要watch
          this.isWatch = false

          let nextRow = lastchar
          this.textareValue = this.textareValue.substring(0, this.textareValue.length-1)
          this.textareValue += '\n'
          this.textareValue += nextRow
          this.countOfcurrow = 1

          // this.isWatch = true
          return
        }
      }
    },
    methods: {
    },
    computed: {
      getCount () {
        return this.textareValue.split('\n').length
      }
    }
  }
</script>

<style lang="stylus" scoped type="text/stylus">
  .app {

  }
    .left-div {
      float left
      width: 50%
      height: 100%
      padding-top: 20px
      .from {
        width: 80%
      }
      .textarea {
        width: 80%
        height: 50%
        margin-left: 10%
      }
    }
    .right-div {
      float right
      width: 50%
      height: 100%
      .right-text {
        height: 100%
        background-size: 100% 100%
        background-repeat: no-repeat
        background:url('http://pic.qiantucdn.com/58pic/18/01/55/42358PIC4Bt_1024.jpg')
      }
    }

</style>
